<!--
 * @Author: 陈焕杰
 * @Date: 2020-06-28 17:32:33
 * @LastEditTime: 2020-06-29 21:00:35
 * @LastEditors: Please set LastEditors
 * @Description: 物流信息
 * @FilePath: \mobile_project\src\pages\user\orders\logistical.vue
--> 

<template>
  <div class="logistical">
    <van-nav-bar title="物流信息" left-text="返回" left-arrow placeholder @click-left="goback" />
    <div class="detail">
      <van-image :src="require('@/assets/logo.png')" lazy-load>
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <div class="center">
        <p class="company">物流公司:顺丰速运</p>
        <p class="num">物流编号:68684521321546</p>
      </div>
    </div>
    <van-steps direction="vertical" active-color="red" :active="active">
      <van-step>
        <h3>快递已发出</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
      <van-step>
        <h3>快递已到达广州天河，正在为您安排配送</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>快递已到达小区，请注意签收</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>快递已签收</h3>
        <p>2016-07-12 13:00</p>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    goback() {
      this.$router.go(-1); //返回上一页
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/my/orders/logistical";
</style>